<link rel="stylesheet" href="/assets/home/css/email.css">


    <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
        <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">邮箱验证</h1>
    </header>

    <div class="user">
        <div class="avatar wow fadeInUp">
            <div class="avatar wow fadeInUp">
                {if condition = "$AutoLogin['avatar'] && is_file('.'.$AutoLogin['avatar'])"}
                    <img src="{$AutoLogin.avatar}" />
                {else /}
                <img src="/assets/home/images/avatar.jpg" />
                {/if}
            </div>
        </div>
    </div>
    
    <form class="mui-input-group" method="post" enctype="multipart/form-data">      
        <div class="mui-input-row">
            <label>邮箱：</label>
            <input type="text" name="email" value="{$AutoLogin.email}"  class="mui-input-clear" placeholder="请输入邮箱" required disabled />
        </div>
    
        <div class="mui-input-row">
            <label>验证码：</label>
            <input type="text" name="code" class="mui-input-clear" placeholder="请输入验证码" required />
        </div>
        
        
        <div class="mui-button-row">
            <button type="submit" class="mui-btn mui-btn-primary">立即验证</button>
            <button type="button" id="send" class="mui-btn mui-btn-success">发送邮件</button>
        </div>
    </form>


<script>
    var sec = 60
    var T

    //点击发送邮件按钮
    $("#send").click(async function(){
        mui.confirm(
            '是否发送邮件',
            '发送提醒',
            ['确认','取消'],
            //点击确认则res值为0，点击取消则res值为1
            function(res)
            {
                if(res.index === 0)
                {
                    $(this).html('邮件发送中....')
                    $(this).attr('disabled', true)
                      
                    //ajax请求,让后端来发送验证码
                    $.ajax({
                        url:`{:url('home/business/email')}`,
                        type:'POST',
                        dataType : 'json',
                        data:{action:'send'},
                        success : (success) => 
                        {   
                    //轻提醒
                    mui.toast(success.msg, {duration: 3000})
                    //code的值为1代表true发送成功,0代表false
                    if(success.code)
                    {
                        //倒计时
                        $(this).html(sec)
                        $(this).attr('disabled', true)
                        T = setInterval(autoplay, 1000)
                }
            },
        })

                }
            }
        )
    })

    function autoplay()
    {
        var num = $("#send").html()
            num = parseInt(num)

        if(num <= 0)
        {
            //停止定时器
            clearInterval(T)
            $("#send").removeAttr('disabled')
            $("#send").html('重新发送验证码')
        }else
        {
            $('#send').html(num-1)
        }
    }
</script>